<script lang="ts">
export default {
  name: "xt-config-provider",
};
</script>

<script setup lang="ts">
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import en from "element-plus/dist/locale/en.mjs";
import { computed } from "vue";

interface Props {
  locale?: string;
}

const props = withDefaults(defineProps<Props>(), {
  locale: "zh-cn",
});

const locale = computed(() => {
  const localeMap = {
    "zh-cn": zhCn,
    en,
  };
  return localeMap[props.locale] || zhCn;
});
</script>

<template>
  <el-config-provider class="xt-config-provider" :locale="locale">
    <template v-for="(_value, name) in $slots" #[name]="scope" :key="name">
      <slot :name="name" v-bind="scope || {}"></slot>
    </template>
  </el-config-provider>
</template>

<style lang="scss">
@use "../../../scss/xt-config-provider.scss";
</style>
